
import React from 'react'
import { useState } from 'react'
import {addListAction} from '../redux/actions'

export default function Input(props) {
  const [value, setValue] = useState('')
  function clickHandle(){
    //将用户填写的内容提交到仓库 dispatch方法会派发一个action对象到reducer内
    //addListAction(value)===>{type:ADD,data:value} 这个就是我们的action描述对象，该对象会被dispatch(派发)到reducer里面
    props.store.dispatch(addListAction(value))
  }

  return (
    <div className='form-inline'>
      <input
        type='text'
        className='from-control'
        placeholder='请输入待办事项'
        style={{marginRight: '10px'}}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button className='btn btn-primary' onClick={clickHandle}>提交</button>
    </div>
  )
}